<template>
    <div class="shop_info_wrap" v-loading="over">
        <div class="shop_info_header">
            <!--<i class="el-icon-arrow-left" @click="handleBack"></i>-->
            <p>产品详情</p>
            <!--<p></p>-->
        </div>
        <div id='player' class="video" v-show="goodInfo && goodInfo.video && playing">
            <video-player  class="video-player vjs-custom-skin"
                           ref="videoPlayer"
                           :playsinline="true"
                           :options="playerOptions"
                           :x5-video-player-fullscreen="true"
                           @pause="onPlayerPause($event)"
                           @play="onPlayerPlay($event)"
            ></video-player>
            <!--<div class="back" v-show="back"><img src="../../assets/img/icon.png" alt=""
                                                 @click="handleVideoBack"></div>
            <div id="output" v-show="play" @click="videoPlay">
                <img src="../../assets/img/pofang@2x.png" alt=""
                     style="width: 3.5rem;transform: translateY(-50%)">
            </div>
            <video id="video" :src="$config.baseUrl + goodInfo.video.file_path"
                   x5-video-player-type="h5" playsinline webkit-playsinline
                   x5-video-player-fullscreen="true"></video>
            <div class="control">
                <div class="control_wrap">
                    <span class="pause" v-show="!play" @click="videoPause($event)"><span></span><span></span></span>
                    <span class="play" v-if="play" @click="videoPlay"><div></div></span>
                    <span class="progress" @click="drop($event)">
                        <span class="bar" v-show="!play || pause"></span>
                    </span>
                    <span class="times">
                        <span class="current">00:00:00</span>/
                        <span class="totalTime">00:00:00</span>
                    </span>
                </div>
            </div>-->
        </div>
        <carousel v-if="goodInfo && goodInfo.images && !playing" :per-page="1" adjustableHeightEasing="300px"
                  :autoplay="true"
                  :centerMode="true" :loop="true"
                  :mouse-drag="false" :autoplayTimeout="5000">
            <slide v-if="goodInfo && goodInfo.video">
                <el-image
                        :src="$config.baseUrl + goodInfo.video.cover_path"
                        fit="contain"></el-image>
                <div id="control" @click="handlePlay"
                     style="position: absolute;left:50%;top:50%;transform:translate3d(-50%,-75%,0)">
                    <img style="width:150px;height: auto" src="../../assets/img/pofang@2x.png" alt="">
                </div>
            </slide>
            <slide v-for="(item,index) in goodInfo.images" :key="index">
                <el-image
                        :src="$config.baseUrl + item.file_path"
                        fit="contain"></el-image>
            </slide>
        </carousel>
        <div class="shop_info_money">
            <img src="../../assets/img/¥@2x.png" alt="">
            <span>{{goodInfo && goodInfo.price.split('.')[0]}}.<span>{{goodInfo && goodInfo.price.split('.')[1]}}</span></span>
            <p>
                {{goodInfo && goodInfo.title}}
            </p>
        </div>
        <div class="line"></div>
        <div class="shop_info_detail">
            <p class="info_detail_title">商品介绍</p>
            <p class="info_detail_content" v-html="goodInfo && goodInfo.description"></p>
        </div>
        <div class="line"></div>
        <!--<div class="shop_info_photo_title">商品详情</div>
        <div class="line"></div>
        <div class="shop_info_photo">
            <el-image
                    src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                    fit="cover"></el-image>
        </div>-->
        <div class="shop_info_note" v-if="goodInfo">
            <span></span>
            <p>该公司还有这些商品在热售</p>
            <span></span>
        </div>
        <div class="store_shop">
            <list v-if="goodInfo" :shop_id="goodInfo.shop_id" @on-handle-shop="handleOtherInfo" @on-handle-addCar="handleAddCar"></list>
            <!--            <list :otherGoods="otherGoods" @on-handle-shop="handleOther"></list>-->
        </div>

        <div class="shop_info_nav">
            <div class="nav_bottom_index" @click="handleBackIndex">
                <el-badge value="0" class="item" :hidden="true">
                    <img src="../../assets/img/icon-index.png" alt="">
                </el-badge>
                <p>首页</p>
            </div>
            <span style="align-self: center;height: 100%;width: 1px;background-color:#3BC7FF"></span>
            <div class="nav_bottom_custom" @click="handleMessage('custom')">
                <el-badge v-if="handleList" :value="handleList.unreadCount" class="item"
                          :hidden="handleList.unreadCount == 0">
                    <img src="../../assets/img/icon-customer-service@2x.png" alt="">
                </el-badge>
                <el-badge v-if="!handleList" value="0" class="item" :hidden="true">
                    <img src="../../assets/img/icon-customer-service@2x.png" alt="">
                </el-badge>
                <p>客服</p>
            </div>
            <span style="align-self: center;height: 100%;width: 1px;background-color:#3BC7FF"></span>
            <div class="nav_bottom_car" @click="handleMessage('shop_car')">
                <el-badge :value="car_num" class="item" :hidden="car_num === 0">
                    <img src="../../assets/img/icon-indes-shopping cart@2x.png" alt="">
                </el-badge>
                <p>购物车</p>
            </div>
            <span style="align-self: center;height: 100%;width: 1px;background-color: #3BC7FF"></span>
            <div class="nav_bottom_download" @click="handleSelectSku(0)">
                <p>加入购物车</p>
            </div>
            <div class="nav_bottom_buy" @click="handleSelectSku(1)">
                <p>立即购买</p>
            </div>
        </div>

        <div style="z-index: 2;float: left;" v-if="select_sku">
            <div class="select_dialog_bg" @click="handleCancel"></div>
            <select_sku :goodInfo="select_sku_info" :cocResult="coc_result"
                        @on-handle-cancel="handleCancel"></select_sku>
        </div>
    </div>
</template>

<script>
    import select_sku from '../../components/select_sku'
    import {Carousel, Slide} from 'vue-carousel';
    import list from '../../components/shop_list'
    import {getToken} from '../../libs/http';
    import http from '../../libs/http';
    import {mapState} from 'vuex'
    import axios from 'axios'

    // import {mapGetters} from 'vuex'
    // import {mapState} from 'vuex'
    // import {mapState} from 'vuex'
    const token = getToken();
    import wx from 'weixin-js-sdk'
    // const id = window.location.search.split('?')[1].split('&')[0].split('=')[1];
    // const name = window.location.search.split('?')[1].split('&')[1].split('=')[1];
    export default {
        name: 'index',
        components: {
            Carousel,
            Slide,
            list,
            select_sku,
        },
        data() {
            return {
                /* id,
                 name,*/
                token,
                name: '',
                id: '',
                playerOptions : {
                    playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
                    autoplay: false, //如果true,浏览器准备好时开始回放。
                    muted: false, // 默认情况下将会消除任何音频。
                    loop: false, // 导致视频一结束就重新开始。
                    preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                    language: 'zh-CN',
                    aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                    sources: [{
                        //type: "",//这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
                        src: "" //url地址
                    }],
                    poster: "", //你的封面地址
                    // width: document.documentElement.clientWidth, //播放器宽度
                    notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                    controlBar: {
                        timeDivider: true,
                        durationDisplay: true,
                        remainingTimeDisplay: false,
                        fullscreenToggle: true  //全屏按钮
                    }
                },
                playing: false,
                play: true,
                pause: false,
                back: true,
                videoTime: null,
                goodInfo: null,
                select_sku: false,
                select_sku_info: null,
                //判断是加入购物车，还是直接购买，0是加入，1是购买
                coc_result: 0,
                car_num: 0,
                service_id: '',
                im_unread: 0,
                over: true,

            }
        },
        mounted() {

        },

        created() {
            this.getParams()
        },
        computed: {
            ...mapState({
                handleList(state) {
                    let message = null;
                    for (let i in state.conversation.conversationList) {
                        if (state.conversation.conversationList[i].conversationID === ("C2C" + this.service_id + 'b')) {
                            message = state.conversation.conversationList[i];
                        }
                    }
                    return message
                },
                isSDKReady(stste) {
                    return state.user.isSDKReady
                }
            }),
            player() {
                return this.$refs.videoPlayer.player
            }
        },
        methods: {
            getParams() {
                // 取到路由带过来的参数
                this.name = this.$route.query.name;
                this.id = this.$route.query.id;
                if (this.$route.query.task_order_id) {
                    sessionStorage.setItem('task_order_id', this.$route.query.task_order_id)
                }
                this.handleShopInfo(this.id)
            },

            handleShopInfo(id) {
                this.apiGet('api/goods/info/' + id).then((res) => {
                    this.goodInfo = res;
                    if(res.video){
                        this.playerOptions.sources[0].src = this.$config.baseUrl + res.video.file_path
                    }
                    this.select_sku_info = res;
                    if (res) {
                        this.over = false;
                        axios.post( this.$config.baseUrl + '/api/wechat/share/params',{share_url:window.location.href})
                            .then(function (response) {
                                if(response.status !== 200){
                                    this.$message.error(response.statusText);
                                }else{
                                    if (response.data) {
                                        this.share_data = response.data;
                                        this.share()
                                    }
                                }
                                console.log(this.share_data)
                            }.bind(this))
                            .catch(function (error) {
                                console.log(error);
                            });
                    }
                    sessionStorage.setItem('shopId', res.shop_id)
                    this.apiGet('api/shop/info/' + res.shop_id).then((res) => {
                        sessionStorage.setItem('service_id', res.user_id)
                        this.service_id = res.user_id;
                        console.log(sessionStorage.getItem('service_id') )
                    })
                });

                if (sessionStorage.getItem('token')) {
                    this.handleCarNum()
                }
            },
            handleCarNum() {
                this.apiGet('api/cart?shop_id=' + sessionStorage.getItem('shopId')).then((res) => {
                    this.car_num = res.length
                });
            },

            handlePlay(){
                this.playing = true;
                this.player.play()
            },

            handleOtherInfo(id) {
                this.id = id;
                this.$router.push({
                    name: 'shop_info',
                    query: {
                        id: id,
                        task_order_id:sessionStorage.getItem('task_order_id')
                    }
                });
                this.playing = false
                this.handleShopInfo(id);
                // window.scrollTo(0, 0);
            },

            handleAddCar(data, show, coc) {
                this.select_sku_info = data;
                this.select_sku = show;
                this.coc_result = coc;
                this.onPlayerPause()
            },

            handleSelectSku(index) {
                this.onPlayerPause()
                this.coc_result = index;
                if (sessionStorage.getItem('token')) {
                    this.select_sku = true;
                } else {
                    this.$router.push({
                        name: 'login',
                        query: {name: 'shop_info', id: this.id,task_order_id:sessionStorage.getItem('task_order_id')}
                    });
                }
            },

            handleCancel() {
                this.select_sku = false
                this.handleCarNum()
            },

            handleBack() {
                this.$router.push({
                    name: 'index',
                });
            },

            handleMessage(path) {
                if (sessionStorage.getItem('token')) {
                    this.$router.push({
                        name: path,
                        query: {id: this.id,task_order_id:sessionStorage.getItem('task_order_id')}
                    });
                    /*this.apiGet('api/shop/info/' + sessionStorage.getItem('shopId')).then((res)=>{
                        console.log(res)
                        if(res){
                            this.$router.push({
                                name: path,
                                query:{user_id:res.user_id}
                                // query: {name: 'shop_info', id: this.id}
                            });
                        }
                    })*/
                } else {
                    this.$router.push({
                        name: 'login',
                        query: {name: path, id: this.id,task_order_id:sessionStorage.getItem('task_order_id')}
                    });
                }
            },

            handleBackIndex() {
                this.$router.push({
                    name: 'index',
                    query: {id: this.id,task_order_id:sessionStorage.getItem('task_order_id')}
                });
            },

            onPlayerPlay(player) {
                this.player.play()
            },
            onPlayerPause(player) {
                // alert("pause");
                this.player.pause()
            },

            share(){
                let url = window.location.href;
                let des =  this.goodInfo.description.replace(/<img(?:.|\s)*?>/g,'');
                let description = des.replace(/<[^>]+>/g, "");
                let img;
                if(this.goodInfo.images){
                    img = this.$config.baseUrl + this.goodInfo.images[0].file_path;
                }
                let title = this.goodInfo.title;
                console.log(description);
                wx.config({
                    debug: true,
                    appId: this.share_data.appId ,
                    timestamp: this.share_data.timestamp ,
                    nonceStr: this.share_data.nonceStr ,
                    signature: this.share_data.signature ,
                    jsApiList: [
                        'updateAppMessageShareData',
                        'updateTimelineShareData'
                    ]
                });
                wx.ready(function () {
                    var shareData = {
                        title: title,
                        desc: description,
                        link: url,
                        imgUrl: img
                    };
                    wx.updateAppMessageShareData(shareData);
                    wx.updateTimelineShareData(shareData);
                });
                wx.error(function (res) {
                    console.log(res.errMsg+"错误信息");
                });
                window.alert=function(){
                    return false
                }
            }

        },
        watch: {
            select_sku(){
                if(this.select_sku){
                    document.body.style.overflow = 'hidden'
                }else{
                    document.body.style.overflow = 'auto'
                }
            }
        },
        mixins: [http]
    }
</script>

<style lang="stylus">

    .shop_info_wrap
        width 100%
        text-align left
        padding-bottom 70px

        .shop_info_header
            height: 44px;
            font-size: 16px;
            color #FFFFFF;
            /*display flex;*/
            text-align: center;
            line-height: 44px;
            background: #3BC7FF;

        .video
            position: relative
            width 100%;
            height auto
            .vjs-big-play-button
                font-size 30px
                width 50px
                height 50px!important
                line-height 50px!important
                border-radius 50%
                transform translate3d(30%,10%,0)
        /*.fullscreen, .video
            position: relative
            height 250px

            #output
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%);
                z-index: 999999;

            #video
                width 100%
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate3d(-50%, -50%, 0)

            .control
                position: absolute;
                bottom: 0;
                left: 0;
                background-color: #454545;
                width: 100%;
                height: 35px;
                color: white;
                padding 0 10px
                box-sizing border-box

                .control_wrap
                    display: flex;
                    justify-content: space-between;
                    height: 100%;
                    width: 100%;

                    .pause
                        align-self: center;
                        margin-left: 10px;
                        width: 10px;

                        span
                            margin-left: 0.05rem;
                            border-left: 0.1rem solid #fff;

                    .play
                        align-self: center;
                        margin-left: 0.3rem;
                        width: 0.3rem;

                        div
                            border: 0.2rem solid transparent;
                            border-left: 0.25rem solid #fff;

                    .progress
                        align-self: center;
                        position: relative;
                        width: 50%;
                        height: 25%;
                        border-radius: 0.1rem;
                        background: rgba(0, 0, 0, .6);

                        .bar
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 0;
                            height: 100%;
                            background-color: #24BFFF;
                            border-radius: 0.1rem;

                    .times
                        align-self: center;
                        margin-right: 0.3rem;

                    .full
                        align-self: center;
                        margin-right: 0.3rem;

        .fullscreen
            position: fixed;
            top: 0;
            left: 0;
            background: #000;
            z-index: 1000;
            width: 100%;
            height: 100%;

            .back
                position: absolute;
                top: 0;
                left: 0;
                height: 1rem;
                line-height: 1rem;
                padding-left: 0.5rem;
                text-align: left;
                background-color: rgba(0, 0, 0, .1);
                width: 100%;
                z-index: 9999999999;

                img
                    width: 0.3rem;
                    font-weight: bolder;
                    vertical-align: middle;
*/

        .VueCarousel
            height 250px

            .VueCarousel-wrapper
                height 100%

                .VueCarousel-inner
                    height 100%

                    .VueCarousel-slide
                        height 100%
                        text-align center

                        img
                            height 250px

            .VueCarousel-pagination
                .VueCarousel-dot-container
                    margin-top 0 !important

        .shop_info_money
            padding 27px 24px 25px 20px

            img
                width 12px
                margin-right 12px

            span
                font-size: 30px;
                color: rgba(255, 81, 80, 1);

                span
                    font-size 23px

            p
                font-size: 15px;
                margin-top 12px
                font-weight: bold;
                line-height: 20px;
                color: rgba(38, 38, 38, 1);

        .line
            height: 8px;
            background: rgba(247, 247, 247, 1);

        .shop_info_detail
            padding 20px
            overflow: hidden;

            .info_detail_title
                font-size: 14px;
                margin-bottom 20px
                color: rgba(51, 51, 51, 1);

            .info_detail_content
                float: left;
                /*font-size: 13px;*/
                line-height: 26px;
                white-space: pre-line
                color: rgba(38, 38, 38, 1);

                img
                    width 100%

        /*.shop_info_photo_title
            padding 20px
            font-size: 14px;
            color: rgba(38, 38, 38, 1);

        .shop_info_photo
            img
                width 100%
                height 100%
*/

        .shop_info_note
            display flex;
            padding 17px 0
            margin-top 20px
            justify-content center
            background: rgba(247, 247, 247, 1);

            span
                width: 64px;
                height: 1px;
                align-self center
                background: rgba(59, 199, 255, 1);

            p
                margin 0 13px
                font-size: 12px;
                color: rgba(59, 199, 255, 1);

        .store_shop
            padding: 5px 0 0 20px;
            background-image: radial-gradient(circle, #F7F7F7, white);

        .shop_info_nav
            width 100%;
            height 55px
            position fixed
            left 0;
            bottom 0;
            display flex;
            background: #fff;
            justify-content space-between
            border-top: 1px solid #3BC7FF;

            .nav_bottom_index, .nav_bottom_custom, .nav_bottom_car, .nav_bottom_download, .nav_bottom_buy
                align-self center
                text-align center;

            .nav_bottom_index, .nav_bottom_custom, .nav_bottom_car
                /*width 40px*/
                color #333
                padding 6px 11px

                img
                    height 18px
                    margin-bottom 7px

                .el-badge
                    .el-badge__content
                        top: 4px
                        width 13px
                        height: 13px
                        padding 1px
                        font-size 12px
                        line-height 13px
                        border-radius: 50%
                        background-color #FF0000;

            .nav_bottom_download
                /*width 115px*/
                font-size: 15px;
                height 100%
                line-height 55px

                /*line-height 49px*/

                a
                    color: rgba(36, 191, 255, 1);

            .nav_bottom_buy
                /*width 104px*/
                height 100%
                line-height 55px
                padding 0px 11px
                font-size: 15px;
                color: rgba(255, 255, 255, 1);
                background: rgba(59, 199, 255, 1);

        .select_dialog_bg
            position fixed
            top: 0;
            left 0;
            right 0
            bottom 0;
            width 100%;
            height 100%;
            overflow hidden
            background-color rgba(0, 0, 0, .5);
</style>
